<template>
  <div class="details-box">
    <div class="left-nav">
      <div
        v-for="(nav, index) in menuList"
        :key="nav.id"
        class="nav-item"
        :class="activeIndex === index ? 'active' : ''"
        @click="changeNav(nav.id, index)"
      >
        {{ nav.name }}
      </div>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div>{{ menuList[activeIndex].name || "" }}</div>
        <div style="flex: 1"></div>
        <el-button style="float: right" type="primary" @click="changeArchives">
          修改
        </el-button>
      </div>
      <div v-for="(test, index) in recordVoList" :key="index" class="text item">
        <div class="test-name">
          {{ index + 1 }}、{{ test.codeName }}
          <!-- test.name || -->
        </div>
        <!-- label="文本框" value="input" -->
        <div style="margin-left: 16px">
          <el-input
            style="width: 300px"
            v-if="test.operatorName == 'input' || test.operatorName == 'text'"
            v-model="test.answer"
            placeholder="请输入内容"
          ></el-input>
          <!-- label="文本域" value="textarea" -->
          <el-input
            v-else-if="test.operatorName == 'disabled'"
            disabled
            :rows="2"
            placeholder="请输入内容"
            v-model="test.answer"
          >
          </el-input>
          <el-input
            v-else-if="test.operatorName == 'textarea'"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="test.answer"
          >
          </el-input>
          <!-- label="数字输入框" value="number" -->
          <el-input-number
            v-else-if="test.operatorName == 'number'"
            v-model="test.answer"
            :controls="false"
            placeholder="请输入"
            style="width: 300px"
          />
          <!-- label="下拉框" value="select" -->
          <el-select
            style="width: 300px"
            v-else-if="test.operatorName == 'select'"
            v-model="test.answer"
            placeholder="请选择"
          >
            <el-option
              v-for="(val, key) in JSON.parse(test.options)"
              :key="key"
              :label="val"
              :value="key"
            >
            </el-option>
          </el-select>
          <!-- label="单选框" value="radio" -->
          <el-radio-group
            v-else-if="test.operatorName == 'radio'"
            v-model="test.answer"
          >
            <el-radio
              v-for="(val, key) in JSON.parse(test.options)"
              :key="key"
              :label="key"
              >{{ val }}</el-radio
            >
          </el-radio-group>
          <!-- label="复选框" value="checkbox" -->
          <el-checkbox-group
            v-else-if="test.operatorName == 'checkbox'"
            v-model="test.answer"
          >
            <el-checkbox
              v-for="(val, key) in JSON.parse(test.options)"
              :key="key"
              :label="key"
              >{{ val }}</el-checkbox
            >
            <!-- <el-checkbox label="1"> 1 </el-checkbox>
            <el-checkbox label="2"> 2 </el-checkbox>
            <el-checkbox label="3"> 3 </el-checkbox> -->
          </el-checkbox-group>
          <!-- label="日期控件" value="datetime" -->
          <el-date-picker
            style="width: 300px"
            v-else-if="test.operatorName == 'datetime'"
            v-model="test.answer"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
          <el-date-picker
            style="width: 300px"
            v-else-if="test.operatorName == 'date'"
            v-model="test.answer"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- label="图片上传" value="imageUpload" -->
          <imageUpload
            v-else-if="test.operatorName == 'imageUpload'"
            v-model="test.answer"
            :fileSize="10"
            style="margin-right: 16px"
          />
          <!-- label="文件上传" value="fileUpload" -->
          <fileUpload
            v-else-if="test.operatorName == 'fileUpload'"
            v-model="test.answer"
            :fileSize="50"
          />
          <!-- label="富文本控件" value="editor" -->
          <editor
            v-else-if="test.operatorName == 'editor'"
            v-model="test.answer"
            :min-height="192"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getListCms } from "@/api/business/cms";
import { queryDetail, updateArchives } from "@/api/data/archives";
export default {
  data() {
    return {
      checkList: [],
      menuList: [],
      menuId: null,
      type: 0,
      activeIndex: 0,
      recordVoList: [],
      dataDetails: {},
    };
  },
  created() {
    const menuId = this.$route.query.id;
    const type = this.$route.query.type;
    this.menuId = menuId;
    this.type = type;
    this.getMenuList(type);
  },
  methods: {
    // 修改档案
    changeArchives() {
      const recordVoList = JSON.parse(JSON.stringify(this.recordVoList));
      for (let i = 0; i < recordVoList.length; i++) {
        if (recordVoList[i].operatorName == "checkbox") {
          if (recordVoList[i].answer != null) {
            recordVoList[i].answer = recordVoList[i].answer.join();
          }
        }
      }
      // this.recordVoList = [...recordVoList];
      const dataDetails = {
        ...this.dataDetails,
        type: this.type,
        recordDtoList: recordVoList,
      };
      updateArchives(dataDetails).then((res) => {
        this.$message.success("修改成功");
      });
    },
    // 获取数据列表
    getMenuList(type) {
      const param = {
        pageNum: 1,
        pageSize: 20,
        param: {
          name: null,
          type,
        },
      };
      getListCms(param).then((res) => {
        const { data } = res;
        this.menuList = data.list;
        this.activeIndex = 0;
        this.getMneuCodeList(data.list[0].id);
      });
    },
    changeNav(id, index) {
      this.activeIndex = index;
      this.getMneuCodeList(id);
    },
    getMneuCodeList(tagId) {
      const param = {
        codeList: [],
        type: this.type, // 档案类型(0:筛查； 1:急救； 2:治疗； 3:康复)
        id: this.menuId,
        tagId: tagId,
      };
      queryDetail(param).then((res) => {
        console.log("res: ", res);
        const { code, data, msg } = res;
        this.dataDetails = { ...res.data };
        const recordVoList = [...data.recordVoList];
        for (let i = 0; i < recordVoList.length; i++) {
          if (recordVoList[i].operatorName == "checkbox") {
            if (recordVoList[i].answer == null) {
              recordVoList[i].answer = [];
            }
          }
          if (recordVoList[i].operatorName == "number") {
            console.log("recordVoList[i]: ", recordVoList[i]);
            recordVoList[i].answer = recordVoList[i].answer || undefined;
          }
        }
        this.recordVoList = [...recordVoList];
        this.recordVoList.forEach((item) => {
          if (item.operatorName == "checkbox") {
            item.answer = item.answer.split(",") || [];
          }
        });
      });
    },
  },
};
</script>
<style scoped>
/deep/ .el-card__body {
  padding: 15px 20px 20px 20px;
  height: calc(100% - 58px);
  overflow-y: scroll;
}

.details-box {
  display: flex;
  align-items: flex-start;
  padding: 16px;
}
.left-nav {
  width: 200px;
  /* background: #d2f1ed; */
  box-shadow: 0 0 16px #d2f1ed;
  border-radius: 4px;
  color: #333;
  overflow: hidden;
}
.nav-item {
  height: 50px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.active {
  background: #d2f1ed;
}
.box-card {
  flex: 1;
  height: calc(100vh - 60px - 16px - 16px);
  margin-left: 16px;
}
.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.test-name {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}
.item {
  margin-bottom: 16px;
}
</style>
